<template>
	<view class="container">
		<view class="es-cell" >图片上传</view>
		<es-upload :serverUrl="serverUrl" :header="header" :mediaType="mediaType" :file-list="fileList" @change="onChange" ></es-upload>
		
		<view class="es-cell" >单视频上传</view>
		<view style="width: 690rpx;display: flex;justify-content: space-between;">
			<es-upload :serverUrl="serverUrl" :header="header" :mediaType="['video']" :count="1"
			width="300rpx" height="200rpx"  padding="5rpx" box-width="315rpx" tip="上传视频"
			:file-list="fileList1" @change="onChange1" ></es-upload>
			<!-- 数据回填 -->
			<es-upload :serverUrl="serverUrl" :header="header" :mediaType="['video']" :count="1"
			width="300rpx" height="200rpx"  padding="5rpx" box-width="315rpx"
			:file-list="fileList11" @change="onChange1" ></es-upload>
		</view>
		<view class="es-cell" >图片/文件+数据回填</view>
		<es-upload :serverUrl="serverUrl" :header="header"  :file-list="fileList2" @change="onChange2"></es-upload>
	</view>

</template>

<script>
	import esUpload from '/components/es-upload/es-upload.vue';
	export default {
		components: {
			esUpload
		},
		data() {
			return {
				//配置真实的接口地址
				serverUrl:"https://www.example.com/upload",
				//请求头,配置token等数据
				header:{
					token:"xxxxxxxxxxxxxx"
				},
				mediaType:['image'],
				fileList:[],
				fileList1:[],
				fileList11:[{
						fileType: 'video',
						url: 'https://video-qn.ibaotu.com/01/20/27/58k888piCi7u.mp4',
						thumb:"https://video-qn.ibaotu.com/01/20/27/58k888piCi7u.mp4?vframe/jpg/offset/3|imageView2/0/w/384"
				}],
				fileList2: [{
						fileType: 'video',
						url: 'https://video-qn.ibaotu.com/01/20/27/58k888piCi7u.mp4',
						thumb:"https://video-qn.ibaotu.com/01/20/27/58k888piCi7u.mp4?vframe/jpg/offset/3|imageView2/0/w/384"
					},
					{
						fileType: 'image',
						url: 'https://api.horosama.com/random.php?t=1'
					},
					{
						fileType: 'image',
						url: 'https://api.horosama.com/random.php?t=2'
					},
					{
						fileType: 'image',
						url: 'https://api.horosama.com/random.php?t=3'
					},
					{
						fileType: 'video',
						url: 'https://video-qn.ibaotu.com/01/20/27/58k888piCi7u.mp4',
						thumb:"https://video-qn.ibaotu.com/01/20/27/58k888piCi7u.mp4?vframe/jpg/offset/3|imageView2/0/w/384"
					}
				]

			}
		},
		methods:{
			onChange(e){
				this.fileList = e;
			},
			onChange1(e){
				this.fileList1 = e;
			},
			onChange2(e){
				this.fileList2 = e;
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f8fb;
	}

	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 100rpx;
	}

	.es-cell{
		width:670rpx;
		font-size: 24rpx;
		color: #B6B6B6;
		margin-top: 80rpx;
		margin-bottom: 30rpx;
	}
	
</style>